<template>
  <div>
    <RefreshComponent @updateData="updateData"></RefreshComponent>
    <div v-for="(item, index) in newsArr" :key="index" class="zh-en">
      <div class="zh">中文：{{ item.zh }}</div>
      <div class="en">翻译：{{ item.en }}</div>
    </div>
    <i-spin size="large" fix v-if="spinShow"></i-spin>
  </div>
</template>

<script>
  import RefreshComponent from '@/components/public/RefreshComponent'
  export default {
    data () {
      return {
        newsArr: [],
        spinShow: false
      }
    },
    components: { RefreshComponent },
    methods: {
      getEnglishData () {
        this.spinShow = true
        wx.request({
          url: 'https://api.tianapi.com/txapi/ensentence/', // 这里必须在后面呢加上 '/',才可以访问到
          data: {
            key: 'c732ed00482b7208218faf599e32239a',
          },
          header: {'content-type':'application/json'},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result)=>{
            const { code, newslist = [] } = result.data
            if (code === 200) {
              this.newsArr = newslist
            }
          },
           complete: ()=>{
            this.spinShow = false
            wx.stopPullDownRefresh()
           }
        })
      },
      updateData () {
        this.getEnglishData()
      }
    },
    onLoad () {
      this.getEnglishData()
    },
    onPullDownRefresh () {
      this.getEnglishData()
    }
  }
</script>

<style scoped>
  .zh-en {
    border: 1px solid #eee;
    border-radius: 8rpx;
    font-size: 16px;
  }
  .en {
    border-top: 1px solid #eee;
    font-size: 14px;
    color: brown;
  }
  .zh, .en {
    line-height: 2;
  }
  .float-refresh {
    margin-bottom: 20rpx;
    overflow: hidden;
  }
</style>